<template>
  <div>
      <el-tabs type="border-card">
        <el-tab-pane label="重置登录密码">
          <div class="dis-flex">
            <span>登录密码：</span>
            <el-input size="small" class="input" show-password v-model.trim="firstLoginPwd"></el-input>
          </div>
          <div class="dis-flex">
            <span>确认密码：</span>
            <el-input size="small" class="input" show-password v-model.trim="confirmLoginPwd"></el-input>
          </div>
          <div>
            <el-button size="small" type="primary" @click="updateLoginPwd">
              修改登录密码
            </el-button>
          </div>
        </el-tab-pane>
        <el-tab-pane label="重置交易密码">
          <div class="dis-flex">
            <span>交易密码：</span>
            <el-input size="small" class="input" show-password v-model.trim="firstDealPwd"></el-input>
          </div>
          <div class="dis-flex">
            <span>确认密码：</span>
            <el-input size="small" class="input" show-password v-model.trim="confirmDealPwd"></el-input>
          </div>
          <div>
            <el-button size="small" type="primary" @click="updateDealPwd">
              修改交易密码
            </el-button>
          </div>
        </el-tab-pane>
        <el-tab-pane label="绑定动态口令">
          
        </el-tab-pane>
      </el-tabs>

  </div>
</template>

<script>
export default {
  name: 'passwordMange',
  data(){
    return {
      firstLoginPwd:'',
      confirmLoginPwd:'',
      firstDealPwd:'',
      confirmDealPwd:'',
    }
  },
  methods:{
    updateDealPwd(){
      if(this.firstDealPwd !== this.confirmDealPwd) return this.$message.warning('两次密码不一致');
      
    },
    updateLoginPwd(){
      if(this.firstLoginPwd !== this.confirmLoginPwd) return this.$message.warning('两次密码不一致');

    },
  }
}
</script>

<style rel="stylesheet/scss" lang="scss" scoped>
.dis-flex {
  display: flex;
  align-items: center;
  margin: 10px;
  .input{
    width: 200px;
  }
}
</style>